約 4,162,366 件
https://w.atwiki.jp/keisks/pages/235.html
開発環境 Chromeでデバッグ http //shim0mura.hatenadiary.jp/entry/20111231/1325357395 Chrome Mac のキーボード ショートカット https //support.google.com/chrome/answer/165450?hl=ja ⌘-option-Iデベロッパー ツールを開きます。 ⌘-option-JJavaScript コンソールを開きます。 ⌘-option-U現在のページのソースを開きます。 tips tricks テキスト入力欄の文字数をリアルタイム表示 http //allabout.co.jp/gm/gc/23957/3/ JavascriptからPythonにGETで送ってJSONPで帰ってみる http //creatornote.blog87.fc2.com/blog-entry-31.html jQueryによるインクリメンタルなプロセス http //mollifier.hatenablog.com/entry/20100618/p1 autocomplete http //jqueryui.com/autocomplete/
https://w.atwiki.jp/api_programming/pages/40.html
下位ページ AngularJS Date(日付・時刻) jQuery jQuery Mobile jQuery-UI イベント制御 オブジェクト ダイアログ(Dialog) 変数・演算子 文字列(String) 構文・処理 表示 連想配列 配列 関数 非同期処理 Content コードの記述方法HTMLページ内に記述 コードの実行タイミングDOMが構築されている途中 DOMが構築されてから 関数の定義function文による定義 デフォルト引数の設定 引数は参照渡しか値渡しか? テキストボックスの値を取得するid属性で指定する場合 name属性で指定する場合 クッキーの操作書き込み設定値を加える 読み出し 正規表現 タイマーの利用と停止 ポップアップウィンドウ getで指定するパラメータを、エンコード/デコードする 配列のソート ページの遷移 / リダイレクト任意のページに移動 履歴の前後に移動 Dateオブジェクトの計算 即時関数即時関数のポイント JSPの変数をJavascriptに渡す。 Javascriptの変数をJavaに渡す コメント1行コメント 複数行コメント タッチデバイスへの対応 JSONデータの読み込み ウィンドウサイズの取得 コードの記述方法 http //www.openspc2.org/JavaScript/study/script.html HTMLページ内に記述 SCRIPT /SCRIPT type="text/javascript" language="~" でバージョン指定も可能 コードの実行タイミング .onload .ready DOMが構築されている途中 script /script の中に書くと、読み込まれた時点で実行される。 DOMが構築されてから document.ready DOMツリーは構築されているが、まだ外部からのロードは始まっていない。 window.onload 既に画像のレンダリングも終わった状態 window.onload = function(){...} [[]] 【JavaScript】記述方法別の実行タイミングについて -Qiita 関数の定義 http //www.atmarkit.co.jp/ait/articles/0707/10/news124.html] function文による定義 Functionコンストラクタによる定義 関数リテラルによる定義 function文による定義 function 関数名([引数1 [, 引数2 [, ……]]) { [関数内で実行される任意の命令……] } デフォルト引数の設定 = で事前設定しておくと、デフォルト扱いになる。 function testfunc(a, b = null) もし function testfunc(a = null, b) で、引数 testfunc(1) にしたら、a = 1, b = undefined になる。 デフォルト引数 引数は参照渡しか値渡しか? オブジェクト、配列は参照渡し 数、文字列は値渡し http //so-zou.jp/web-app/tech/programming/javascript/grammar/function/#no13 テキストボックスの値を取得する id属性で指定する場合 document.forms.(参照するフォームのid).(参照するコントロールのid) name属性で指定する場合 document.forms.(参照するフォームのname).(参照するコントロールのname) iPentec クッキーの操作 document.cookieでアクセスが可能 クッキーの使用方法 - JavaScript プログラミング解説 書き込み =(イコール)で、変数と値をセットにして書き込み document.cookie="変数=値" 設定値を加える 寿命を2時間(7200秒)に設定する document.cookie="key=value; max-age=7200" 読み出し document.cookie を読み込めば、そのまま取得できるが、 key1=value1;key2=value2;key3=value3 となるので、分割する必要あり 文字列の分割 正規表現 チェック、置換、該当部分の抜き出しが可能チェック、該当部分の取り出し match 置換 replace Javascriptでの正規表現の利用 タイマーの利用と停止 setInterval関数 返り値がtimerIDで、clearInterval(timerID)で停止させる。 https //techacademy.jp/magazine/5537 ポップアップウィンドウ window.openで開く。戻り値としてウィンドウオブジェクトが返ってくる。これを監視していれば、閉じたかどうか分かる。 http //amenti.usamimi.info/windowopen.html getで指定するパラメータを、エンコード/デコードする encodeURIComponent decodeURIComponent どちらも組み込み関数 http //itpro.nikkeibp.co.jp/article/Reference/20081126/319910/?ST=oss 配列のソート array.sort(comparefunction) comparefunctionは、比較関数を定義する comparefunction(a,b)が返す値が負の時は a→bの順に、正の時は b→a の順に並べる。0なら等しいとする。 Array.sort - Javascript | MDN ページの遷移 / リダイレクト 任意のページに移動 location.href = (URL) 履歴の前後に移動 戻る history.back(); 進む history.forward(); Dateオブジェクトの計算 Date.setMonth(Date.getMonth - 1) のようにすれば計算できる。マイナスの値も(上記のように「月」の場合は「年」が一年遡る) でも、setMinutes(...)とか、戻り値がDateオブジェクトのms変換値が入る。なんでだよ。 Date(ms)で再作成。 その他 日付と時刻の計算 (JavaScript) - MSDN Date 即時関数 (function(){... )()} 即時関数というらしい。即、実行される。 即時関数のポイント 関数が、グローバルに設定されない。 → リソースの節約 関数内で設定された変数は、当然ローカル 知ってて当然?初級者のためのJavaScriptで使う即時関数(function(){...})()の全て JSPの変数をJavascriptに渡す。 getAttributeで素直に渡せるみたい。 Servlet/JSPのデータをJavaScriptに渡す方法 Javascriptの変数をJavaに渡す 確認中 https //dev.mozilla.jp/localmdc/localmdc_8833.html コメント 1行コメント // コメント 複数行コメント /* コメント */ タッチデバイスへの対応 いろいろあるが jQuery Finger JSONデータの読み込み obj = JSON.parse(data) で読み込める。連想配列の状態で格納されている。 JSON.parse() - MDN JSON - MDN ウィンドウサイズの取得 window.parent.screen.width; // 高さ window.parent.screen.height; // 幅 window.onresize = getScreenSize(); // ウィンドウのリサイズ時に発火 //画面サイズを取得する function getScreenSize() { var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height; document.getElementById("ScrSize").innerHTML = s; }
https://w.atwiki.jp/naobe/pages/73.html
言語に戻る はじめに Netscape社が制定。IEのJScriptとの互換性に問題があり、ECMAの標準規格ECMA-262(JavaScript1.1がベース)が制定され、この規格がJavaScriptの標準規格となった。 2009年時点では、JavaScript1.5~1.7。JavaScript2.0が現在検証中。 文法 コメント //コメント /* コメント */ 演算子 typeof演算子 オペランドに変数を用い、変数の型を表す文字を返す。"string","number","boolean","object","function","undefined"のどれかを返す。 等値演算子(==)と同値演算子(===) ==は型変換を行って、同じ値か確認する。===は型も含めて同じであるか判定する。 【例】 var a = "1"; var b = 1; if( a == b) { document.write("等値 br "); } else { document.write("等値でない br "); } document.write(" br "); if( a === b) { document.write("同値 br "); } else { document.write("同値でない br "); } document.write(" br "); 正規表現 JavaScript1.2から正規表現に対応。 修飾子 g マッチしたものを全て出力。 i 大文字と小文字を区別しない。 例 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字:" + b + " br "); //-- /script 条件分岐 if 繰り返し処理 while() {} while(条件) { ステートメント } 条件が真の間、ステートメントを実行する。 do { ステートメント } while(条件); 条件が真の間、ステートメントを実行する。最初のステートメントは無条件で実行する。 for in for(プロパティ in オブジェクト) { } オブジェクトのプロパティ名全てに対して処理する。 【例1】 for(var property in navigator) { document.write(navigator[property]); document.write(" br "); } 関数 機能をモジュール化して、共通化する。資源の節約、バグの低減に有効。 書式 function 関数名(引数) { 処理 [return 式] } 関数リテラル 関数を変数(オブジェクト)に代入して使う。 【例】 var func = function(x,y) { return x * y; } func(10, 20); 変数 関数の外部で定義した変数は関数内で使える(グローバル。C言語と同じ)。 【例】 var aaa = "aaa"; function func(x,y) { return aaa; } window.self 自身のwindowオブジェクト window.opener マルチウィンドウの親 windo.parent フレーム分割の1つ親 with文 共通するオブジェクトの記述を省略するために使う。 書式 with(オブジェクト) { } 例 with(document) { write("aaa"); write("bbb"); } 配列 引数は文字列に変換され連想配列として作成される。 初期化 a = []; 代入 a[0] = 1; a[1] = 2; 削除 delete a[0] a[0]がundefinedになり、a[1]は残る。 先頭の抽出 b = a.shift() aの先頭は削除。 最後の抽出 b = a.pop() aの最後は削除。 指定位置の抽出 b = a.slice(start, [end]) endがなければ最後まで。aは変化しない。bは配列になる。 オブジェクト コンストラクタ関数を作成し、newして使う。メソッドは、クラス固有なのでprototypeプロパティに設定する。 【例】 //長方形 function Rectangle(x, y){ this.x = x; this.y = y; } Rectangle.prototype.area = function(){ return this.x * this.y; } var rect = new Rectangle(10, 20); document.write("x:" + rect.x + " br "); document.write("y:" + rect.y + " br "); document.write("面積:" + rect.area() + " br "); クラスプロパティ コンストラクタ関数のプロパティ。定数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Number.MAX_VALUE クラスメソッド コンストラクタ関数の関数。汎用的な関数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Date.parse() クラスの継承 プロトタイププロパティを利用して、継承したクラスを作成する。 【例】 // クラスの継承 function PointedRectangle(w, h, x, y) { Rectangle.call(this, w, h); this.x = x; this.y = y; } // メソッドを継承させる PointedRectangle.prototype = new Rectangle(); // プロトタイププロパティを削除 delete PointedRectangle.prototype.width; delete PointedRectangle.prototype.height; // コンストラクタを元に戻す PointedRectangle.prototype.constructor = PointedRectangle; var prect = new PointedRectangle(20, 40, 200, 400); 連想配列 プロパティのアクセス方法には以下の2とおりの方法がある。 obj.property = 値; obj["property"] = 値; 2番目の方法を使うとプロパティ名を変数として与えることができるので、連想配列として使える。 WEBアプリケーション Java Scrriptの記述 script タグの中に本体を記述。 script は、何回でも、どこにでも記述可能。ただし呼び出しの前に本体を記述しなければならない。 header タグの中に記述する場合が多い。 JavaScriptに対応していないブラウザに対処するために以下の書式を使う。 script !-- ・・・ //-- /script イベントハンドラ onclick リンク、ボタンの属性。JavaScriptの関数を指定する。falseを返すと、デフォルト処理をキャンセルする(フォームのときは、送信しない。)。 onload body タグに指定する。ドキュメントや画像などの外部コンテンツが完全に読み込まれたときにこのイベントハンドラが呼び出される。 右クリック禁止 body oncontextmenu="return false"" 外部JavaScriptファイル参照 script type="text/javasctipt" src="XXX.js" /script 組み込みメソッド setTimeout(実行する関数, 遅れ時間(ms)) 【例】 ar timer = false; function foo(){ if(timer == false){ setTimeout(function() { timer = true; foo(); timer=false; }, 2000); return; } alert("hello!"); } foo(); 【例12】 var isTrx = 0; var delayTime = 5000; //2重押下抑止 function check() { if (isTrx == 1) { return false; } isTrx = 1; setTimeout( isTrx = 0; , delayTime); return true; } テクニック [Enter]キーでフォームの内容が送信されるのを防ぐ記述 form action="***" method="***" onsubmit="return false;" オブジェクトモデル window +--document | +-- anchors[] | +-- applets[] | +-- Area | +-- forms[] | | +-- elements[] 要素は、Button,CheckBox,・・・ | | +-- Button | | +-- CheckBox | | +-- FileUpload | | +-- Password | | +-- Hidden | | +-- Radio | | +-- Reset | | +-- Select | | | +-- options[] | | | | | +-- Submit | | +-- Text | | +-- Textarea | +-- images[] | +-- links[] +-- history +-- location +-- frames[] +-- navigator +-- screen windowは、ブラウザウィンドウまたはフレームを表す。 フォーム フォーム全体:forms フォームの各要素:elements 添え字によるアクセス document.forms[1].elements[2] ・・ 2番目のformの3番目の要素(button,password,radiobox,textareaなど ) 名前によるアクセス html form name="f1" /form form name="f2" /form /html 上記例では、document.f2 イベント イベント 発生タイミング イベントハンドラ 対象オブジェクト blur ユーザのフォーカスが離れたとき onBlur テキストフィールド focus フォーカスされたとき onFocus テキストフィールド click クリックしたとき onClick ボタン、ラジオボタン、チェックボックス、サブミットボタン、リンク、リセットボタン change 値が変更されたとき onChange テキストフィールド load WebページがWebブラウザにロードされたとき onLoad bodyタグ unload 別のページに移動したとき onUnLoad bodyタグ 【例 onLoad】 body onLoad="alert( ロードしました )" 【例 onUnLoad】 body onUnLoad="alert( 移動しました )" 動作しない!! 新たにウィンドウを開く window.open(URL, ターゲット, フィーチャ); URL ロードするサイトのURL ターゲット フィーチャ 何も設定しなければ、起動もとのウィンドウと同じ。一つでも設定すれば、設定した項目のみ有効。 項目 説明 height=X ウィンドウの高さ width=X ウィンドウの幅 left=X ウインドウの画面左からの位置 top=X ウインドウの画面トップからの位置 location URL入力用のバーを表示 menubar メニューバーを表示 resizable ウィンドウのサイズを変更可能にする status ウィンドウ下のステータスバーを表示 scrollbars スクロールバーを表示 セキュリティ JavaScriptでできないこと クライアントのファイルに対して読み書きができない。 ネットワーク機能自体をサポートしない(生のTCP/IPを使えない) 別ブラウザを開くのは、ボタンクリックなどのユーザ操作に対してのみ。(無制限なポップアップウィンドウ表示をなくすため) クローズできるのは、自分が開いたウィンドウのみ 小さなウィンドウ(100ピクセル以下)を開くことはできない。 スクリプトをロードしたサーバと異なるサーバからロードしたドキュメントを操作することはできない。(同一出身ポリシー) 作成例 html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" meta http-equiv="Content-Style-Type" content="text/css" meta http-equiv="Content-Script-Type" content="text/javascript" title JavaScriptテスト /title style type="text/css" !-- h1 {font-size 14pt}; h2 {font-size 12pt} -- /style /head body oncontextmenu="return false" onLoad="alert( ロードしました )" onunload="alert( ページを移動しました )" h1 単純な文字出力 /h1 script type="text/javascript" !-- document.write("Hello Java Script."); //-- /script h1 外部ファイル /h1 script type="text/javascript" src="aaa.js" /script h1 正規表現 /h1 h2 マッチした文字を返す /h2 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字:" + b + " br "); //-- /script h1 繰り返し処理 /h1 h2 for in /h2 script type="text/javascript" !-- for(i in navigator) { document.write(navigator[i]); document.write(" br "); } //-- /script h1 関数の使用 /h1 script type="text/javascript" !-- function func1(a) { return a*2; } document.write("3*2=" + func1(3) + " br " ); //-- /script h1 with文 /h1 script type="text/javascript" !-- with(document) { write("aaa" + " br "); write("bbb" + " br "); } //-- /script h1 マウス右クリック無効化 /h1 script language="JavaScript" !-- function RightOff(e) { if (document.layers e.which == 3){ //NNの場合 alert("右クリックメニューは機能停止しました!"); return false; }else if (document.all event.button == 2) { //IEの場合 alert("右クリックメニューは機能停止しました!"); return false; } return true; } if(document.all){ //IEの場合 document.onmousedown = RightOff; } if(document.layers){ //NNの場合 window.onmousedown = RightOff; window.captureEvents(Event.MOUSEDOWN); } // -- /script firefoxでは無効。 h1 onLoad /h1 p ページを開いたときに起動。bodyタグに記述。 /p h1 onUnLoad /h1 p 別のページに移動したときに起動。bodyタグに記述。 /p a href="http //localhost/PukiWiki/index.php" ホームに移動 /a h1 onBlur/onFocus /h1 form input type="text" onblur="alert( onblur action. )" value="" input type="text" onfocus="alert( onfocus action. )" value="" /form h1 別ウィンドウを開く /h1 h1 タイマー /h1 script type="text/javascript" !-- var cnt = 0; var ret; function rewritePg() { var p = document.getElementById("p1"); if(p == null) { alert("p1 null."); } if( cnt % 2 == 0 ) { p.innerHTML = "bbb"; /** p.firstChild.data = "bbb" でも良い。 */ } else { p.innerHTML = "aaa"; } cnt++; ret = setTimeout("rewritePg()", 2000); } function stopRewrite() { clearTimeout(ret); } //-- /script p 2秒ごとにパラグラフの文字を変える。 /p p id="p1" aaa /p input type="button" value="開始" onClick="rewritePg()" / br input type="button" value="停止" onClick="stopRewrite()" / br / body /html
https://w.atwiki.jp/soscomp/pages/156.html
JavaScript単体の話題はここへ Tips 高度な JavaScript 技集主に暗号とかハッシュとか扱うメソッドについて JavaScriptでポリゴン3Dリアルタイム描画JavaScriptだけで3Dシューティングでも作れるかも 新JavaScript入門 13. DateDateオブジェクトの使い方 画面全体をグレーアウトさせるすごいよこれw オブジェクトを配列みたいに扱うこれがなかなかわからなくって2時間ほど悩んでました Tools YUI Compressor OnlineJavaScriptやCSSの圧縮をオンラインでやってくれるようです 名前 コメント このページへのアクセス数 total - today - yesterday - このページのタグ一覧 JavaScript Web開発
https://w.atwiki.jp/asato/pages/242.html
番号リスト ライブラリWebGL ツール 記事 文献 matches.js? backbone meteor Google JavaScript Style Guide busterjs test framework spaceport JavaScriptで作成したゲームを、全スマートフォンに対応させるプラットフォーム Game Closure HTML5 Video Media JavaScript Library Reading binary files using Ajax クロスドメイン通信方法のまとめ ライブラリ Backbone.js Extend.js JSINQ jQuery Alert Dialogs GX JSMock JsUnit Processing.js LINQ to JavaScript WebGL GLGE ツール Java2Script 記事 JavaScript Test Driven Development with JsUnit and JSMock 新星Webブラウザ「Google Chrome」に付属の2デバッガを使いこなそう 文献 Directing JavaScript with Arrows, DSL 2009
https://w.atwiki.jp/t07540kn/pages/13.html
Javascript学びメモ javascriptの記述方法 1. script type="text/javascript" /script 2. script src="uri" type="text/javascript" /script 3. イベントハンドラ上で利用 ➡ onclick="arelt()"とか? ※ヘッダ内に meta http-equiv="Content-script-type" content="text/javascript" を記述してイベントハンドラでjavascriptを使うことを知らせる必要あり 4. a要素で記述 5. noscript /noscript でサポート外のプラウザ用メッセージを記述できる
https://w.atwiki.jp/sq4fqq/pages/13.html
javascriptの練習 script type="text/javascript" alert("こんにちは。世界。"); /script script type="text/javascript" !-- document.write("Javascriptの練習:JSで記述"); /script script type="text/javascript" !-- var txt="田中肖像" document.write(txt) /script 実行結果 田中肖像 script type="text/javascript" !-- txt=6; //変数の定義 document.write(txt); //文字を記述する定型分。 /script 実行結果 6 関数の呼び出し function txtWrite(){ document.write("出時針"); } script type="text/javascript" !-- txtWrite(); /script 実行結果 出時針 外部ファイル shared/js/にcopy.jsファイルを置く script type="text/javascript" src="shared/js/copy.js" /script if文 script type="text/javascript" !-- var myColor="red";//変数の定義 if(myColor=="red"){ document.write(" font color= red 今日は赤い気分です。 /font "); } else{ document.write("今日は赤い気分じゃないです。"); } /script if文2 途中で条件が真になると評価(if文)から抜ける。 p script type="text/javascript" !-- var myColor="black";//変数の定義 if(myColor=="red"){ document.write(" font color= red 今日は赤い気分です。 /font "); } else if(myColor=="blue"){ document.write(" font color= blue 今日は青い気分です。 /font "); } else if(myColor=="green"){ document.write(" font color= green 今日は緑な気分です。 /font "); } else if(myColor=="yellow"){ document.write(" font color= yellow 今日は黄色な気分です。 /font "); } else if(myColor=="purple"){ document.write(" font color= purple 今日は黄色な気分です。 /font "); } else { document.write("今日はよくわからない気分です。"); } /script 実行結果 今日はよくわからない気分です。 if文3 すべての条件式を評価させたい場合 p script type="text/javascript" !-- var myColor="black"; if(myColor !=="red"){ document.write(" font color= red 今日は赤い気分じゃない /font br "); } if(myColor !=="blue"){ document.write(" font color= blue 今日は青い気分じゃない /font br "); } if(myColor !=="green"){ document.write(" font color= green 今日は緑な気分じゃない /font br "); } if(myColor !=="black"){ document.write(" font color= black 今日は黒い気分じゃない /font br "); } if(myColor !=="yellow"){ document.write(" font color= yellow 今日は黄色い気分じゃない /font br "); } if(myColor !=="purple"){ document.write(" font color= purple 今日は紫な気分じゃない /font br "); } /script 実行結果 今日は赤い気分じゃない 今日は青い気分じゃない 今日は緑な気分じゃない 今日は黄色い気分じゃない 今日は紫な気分じゃない h3 for文 /h3 h4 繰り返しの処理 /h4 /p script type="text/javascript" !-- var myWord="Hello! JavaScript!!";//変数の定義 for(i=1;i =7;i++){ document.write(" font size= " + i +" "+ myWord + " /font br "); } /script 実行結果 徐々に大きくなる。 Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!!
https://w.atwiki.jp/hear_br0wn/pages/26.html
Javascript基礎①(概要) Javascript基礎②(関数と変数) Javascript基礎③(四則演算) Javascript基礎④(配列とインクリメント・デクリメント) Javascript基礎⑤(関数と引数) Javascript基礎⑥(for構文) Javascript基礎⑦(if構文(条件分岐))
https://w.atwiki.jp/nestresident/pages/24.html
□Javascript-WEB上のページを自由に編集 ページを自由に編集できるJavascript スクリーンショットを撮るときに広告を消したりとかできます javascript document.body.contentEditable= true ; document.designMode= on ; void 0
https://w.atwiki.jp/kobapan/pages/110.html
JavaScript/【気象庁】過去の気象(今月) JavaScript/空オブジェクト・空配列の判定 JavaScript/GoogleCalenderをフルスクリーンで開くブックマークレット JavaScript/URLからファイル名を取得する JavaScript/1秒後に実行する JavaScript/Grunt bake - Simple static html partials includes JavaScript/jquery.lazyload - 画像を遅延ロード